<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>孕育宝典 - 产检管理</title>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
        <style>
            body {
                font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
                background-color: #f5f5f5;
                color: #333333;
                margin: 0;
                padding: 0;
            }
            .device-container {
                width: 390px;
                height: 844px;
                overflow: hidden;
                position: relative;
                background-color: #f5f5f5;
            }
            .status-bar {
                height: 44px;
                background-color: #ffffff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                font-size: 14px;
                font-weight: 600;
            }
            .header {
                background-color: #ffffff;
                padding: 10px 16px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
            }
            .nav-bar {
                height: 60px;
                background-color: #ffffff;
                position: absolute;
                bottom: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                align-items: center;
                border-top: 1px solid #f0f0f0;
            }
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #666666;
                font-size: 10px;
            }
            .nav-item.active {
                color: #ff9fb5;
            }
            .main-content {
                height: calc(844px - 44px - 60px - 56px);
                overflow-y: auto;
                padding-bottom: 10px;
            }
            .tab-bar {
                display: flex;
                background-color: #ffffff;
                border-bottom: 1px solid #f0f0f0;
            }
            .tab-item {
                flex: 1;
                text-align: center;
                padding: 14px 0;
                font-size: 14px;
                color: #666;
                position: relative;
            }
            .tab-item.active {
                color: #ff9fb5;
                font-weight: 500;
            }
            .tab-item.active::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 25%;
                width: 50%;
                height: 3px;
                background-color: #ff9fb5;
                border-radius: 3px 3px 0 0;
            }
            .checkup-timeline {
                padding: 16px;
            }
            .timeline-item {
                display: flex;
                margin-bottom: 24px;
                position: relative;
            }
            .timeline-item:last-child {
                margin-bottom: 0;
            }
            .timeline-item::before {
                content: '';
                position: absolute;
                top: 40px;
                left: 16px;
                width: 1px;
                height: calc(100% - 16px);
                background-color: #e0e0e0;
            }
            .timeline-item:last-child::before {
                display: none;
            }
            .timeline-badge {
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background-color: #ff9fb5;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 14px;
                margin-right: 12px;
                flex-shrink: 0;
                z-index: 1;
            }
            .timeline-badge.future {
                background-color: #e0e0e0;
                color: #999;
            }
            .timeline-content {
                flex: 1;
                background-color: #ffffff;
                border-radius: 12px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .timeline-week {
                font-size: 14px;
                color: #666;
                margin-bottom: 6px;
            }
            .timeline-title {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 10px;
            }
            .timeline-date {
                display: flex;
                align-items: center;
                font-size: 13px;
                color: #666;
                margin-bottom: 12px;
            }
            .timeline-date i {
                color: #ff9fb5;
                margin-right: 6px;
            }
            .timeline-desc {
                font-size: 13px;
                color: #666;
                line-height: 1.5;
                margin-bottom: 12px;
            }
            .timeline-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-bottom: 12px;
            }
            .timeline-tag {
                font-size: 12px;
                padding: 4px 8px;
                border-radius: 4px;
                background-color: #f5f5f5;
                color: #666;
            }
            .timeline-buttons {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
            }
            .timeline-button {
                font-size: 13px;
                padding: 6px 12px;
                border-radius: 6px;
                text-align: center;
            }
            .button-primary {
                background-color: #ff9fb5;
                color: white;
            }
            .button-secondary {
                background-color: #f5f5f5;
                color: #666;
            }
            .next-checkup {
                background-color: #ffeaef;
                border-radius: 12px;
                margin: 16px;
                padding: 16px;
            }
            .next-checkup-title {
                font-size: 15px;
                font-weight: 500;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
            }
            .next-checkup-title i {
                color: #ff9fb5;
                margin-right: 8px;
            }
            .next-checkup-content {
                display: flex;
                align-items: center;
            }
            .checkup-date {
                width: 50px;
                height: 50px;
                background-color: #ff9fb5;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: white;
                margin-right: 12px;
            }
            .checkup-day {
                font-size: 20px;
                font-weight: 600;
                line-height: 1;
            }
            .checkup-month {
                font-size: 12px;
                margin-top: 4px;
            }
            .checkup-info {
                flex: 1;
            }
            .checkup-name {
                font-size: 14px;
                font-weight: 500;
                margin-bottom: 4px;
            }
            .checkup-time {
                font-size: 12px;
                color: #666;
                margin-bottom: 4px;
            }
            .checkup-countdown {
                font-size: 12px;
                color: #ff6b8b;
            }
            .checkup-actions {
                display: flex;
                justify-content: flex-end;
                margin-top: 10px;
            }
            .checkup-action {
                font-size: 13px;
                padding: 6px 12px;
                border-radius: 6px;
                margin-left: 8px;
            }
            .report-card {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 16px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .report-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
            .report-title {
                font-size: 15px;
                font-weight: 500;
                color: #333;
                display: flex;
                align-items: center;
            }
            .report-title i {
                color: #ff9fb5;
                margin-right: 8px;
            }
            .report-week {
                font-size: 12px;
                color: #666;
            }
            .report-data {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .data-item {
                display: flex;
                flex-direction: column;
            }
            .data-label {
                font-size: 12px;
                color: #999;
                margin-bottom: 4px;
            }
            .data-value {
                font-size: 14px;
                font-weight: 500;
                color: #333;
            }
            .data-value.normal {
                color: #4caf50;
            }
            .data-value.warning {
                color: #ff9800;
            }
            .data-value.alert {
                color: #f44336;
            }
            .data-full {
                grid-column: span 2;
            }
            .note-item {
                display: flex;
                align-items: flex-start;
                margin-top: 12px;
            }
            .note-icon {
                color: #ff9fb5;
                margin-right: 8px;
                font-size: 14px;
                margin-top: 2px;
            }
            .note-text {
                font-size: 12px;
                color: #666;
                line-height: 1.5;
                flex: 1;
            }
            .record-item {
                background-color: #ffffff;
                border-radius: 12px;
                margin: 0 16px 16px;
                padding: 16px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .record-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 12px;
            }
            .record-title {
                font-size: 15px;
                font-weight: 500;
                display: flex;
                align-items: center;
            }
            .record-title i {
                color: #ff9fb5;
                margin-right: 8px;
            }
            .record-date {
                font-size: 12px;
                color: #666;
            }
            .record-images {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-bottom: 12px;
            }
            .record-image {
                width: calc(33.333% - 6px);
                aspect-ratio: 1;
                border-radius: 8px;
                object-fit: cover;
            }
            .floating-button {
                position: fixed;
                right: 20px;
                bottom: 80px;
                width: 56px;
                height: 56px;
                border-radius: 28px;
                background-color: #ff9fb5;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 0 4px 12px rgba(255, 159, 181, 0.4);
                z-index: 10;
            }
            .reminder-list {
                padding: 16px;
            }
            .reminder-item {
                background-color: #fff;
                border-radius: 12px;
                margin-bottom: 16px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            }
            .reminder-header {
                padding: 12px 16px;
                background-color: #ffeaef;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .reminder-title {
                font-size: 14px;
                font-weight: 500;
                color: #ff6b8b;
            }
            .reminder-weeks {
                font-size: 12px;
                color: #666;
            }
            .reminder-body {
                padding: 16px;
            }
            .reminder-detail {
                margin-bottom: 12px;
            }
            .reminder-label {
                font-size: 13px;
                color: #999;
                margin-bottom: 4px;
            }
            .reminder-value {
                font-size: 14px;
                color: #333;
                line-height: 1.5;
            }
            .reminder-desc {
                font-size: 13px;
                color: #666;
                line-height: 1.5;
                margin-bottom: 12px;
            }
            .reminder-tips {
                font-size: 12px;
                color: #ff6b8b;
                background-color: #fff8f9;
                padding: 10px;
                border-radius: 6px;
                margin-bottom: 12px;
            }
            .reminder-buttons {
                display: flex;
                justify-content: flex-end;
            }
            .reminder-button {
                font-size: 13px;
                padding: 6px 12px;
                border-radius: 6px;
                margin-left: 8px;
            }
        </style>
    </head>
    <body>
        <div class="device-container">
            <!-- iOS状态栏 -->
            <div class="status-bar">
                <span>9:41</span>
                <div class="flex items-center">
                    <i class="fas fa-signal mr-1"></i>
                    <i class="fas fa-wifi mr-1"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>

            <!-- 页面头部 -->
            <div class="header">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left mr-4"></i>
                    <h1 class="text-lg font-medium">产检管理</h1>
                </div>
                <i class="fas fa-bell"></i>
            </div>

            <!-- 标签页 -->
            <div class="tab-bar">
                <div class="tab-item active">产检时间表</div>
                <div class="tab-item">检查记录</div>
            </div>

            <!-- 主内容区 -->
            <div class="main-content">
                <!-- 下一次产检 -->
                <div class="next-checkup">
                    <div class="next-checkup-title">
                        <i class="fas fa-calendar-check"></i>
                        <span>下一次产检</span>
                    </div>
                    <div class="next-checkup-content">
                        <div class="checkup-date">
                            <div class="checkup-day">24</div>
                            <div class="checkup-month">5月</div>
                        </div>
                        <div class="checkup-info">
                            <div class="checkup-name">第一次系统产检</div>
                            <div class="checkup-time">上午9:30 · 市妇幼保健院</div>
                            <div class="checkup-countdown">距离产检还有8天</div>
                        </div>
                    </div>
                    <div class="checkup-actions">
                        <div class="checkup-action button-secondary">修改预约</div>
                        <div class="checkup-action button-primary">设置提醒</div>
                    </div>
                </div>

                <!-- 产检时间线 -->
                <div class="checkup-timeline">
                    <!-- 第一次产检 -->
                    <div class="timeline-item">
                        <div class="timeline-badge">
                            <i class="fas fa-check"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-week">孕6-8周</div>
                            <div class="timeline-title">第一次产检（已完成）</div>
                            <div class="timeline-date">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023年4月18日</span>
                            </div>
                            <div class="timeline-desc">确认宫内妊娠，测量胎芽长度，听取胎心，评估早孕反应。</div>
                            <div class="timeline-tags">
                                <div class="timeline-tag">B超检查</div>
                                <div class="timeline-tag">血常规</div>
                                <div class="timeline-tag">尿常规</div>
                            </div>
                            <div class="timeline-buttons">
                                <div class="timeline-button button-secondary">查看报告</div>
                                <div class="timeline-button button-secondary">添加照片</div>
                            </div>
                        </div>
                    </div>

                    <!-- 第二次产检（下一次） -->
                    <div class="timeline-item">
                        <div class="timeline-badge">
                            <i class="fas fa-stethoscope"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-week">孕11-13周</div>
                            <div class="timeline-title">第二次产检（NT检查）</div>
                            <div class="timeline-date">
                                <i class="far fa-calendar-alt"></i>
                                <span>2023年5月24日</span>
                            </div>
                            <div class="timeline-desc">NT超声检查，测量胎儿颈后透明带厚度，筛查染色体异常风险。</div>
                            <div class="timeline-tags">
                                <div class="timeline-tag">NT超声</div>
                                <div class="timeline-tag">唐筛</div>
                                <div class="timeline-tag">血压监测</div>
                            </div>
                            <div class="timeline-buttons">
                                <div class="timeline-button button-primary">预约产检</div>
                            </div>
                        </div>
                    </div>

                    <!-- 第三次产检 -->
                    <div class="timeline-item">
                        <div class="timeline-badge future">
                            <i class="fas fa-stethoscope"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-week">孕16-20周</div>
                            <div class="timeline-title">第三次产检（大排畸）</div>
                            <div class="timeline-date">
                                <i class="far fa-calendar-alt"></i>
                                <span>预计2023年7月上旬</span>
                            </div>
                            <div class="timeline-desc">大排畸超声检查，全面检查胎儿各器官发育情况，确定胎儿性别。</div>
                            <div class="timeline-tags">
                                <div class="timeline-tag">四维彩超</div>
                                <div class="timeline-tag">血糖检测</div>
                                <div class="timeline-tag">肝肾功能</div>
                            </div>
                        </div>
                    </div>

                    <!-- 第四次产检 -->
                    <div class="timeline-item">
                        <div class="timeline-badge future">
                            <i class="fas fa-stethoscope"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-week">孕24-26周</div>
                            <div class="timeline-title">第四次产检（糖筛）</div>
                            <div class="timeline-date">
                                <i class="far fa-calendar-alt"></i>
                                <span>预计2023年8月上旬</span>
                            </div>
                            <div class="timeline-desc">进行糖尿病筛查，监测血压和胎儿发育情况，了解胎动情况。</div>
                            <div class="timeline-tags">
                                <div class="timeline-tag">糖耐量测试</div>
                                <div class="timeline-tag">B超检查</div>
                                <div class="timeline-tag">血压监测</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 浮动按钮 -->
                <div class="floating-button">
                    <i class="fas fa-plus text-xl"></i>
                </div>
            </div>

            <!-- 底部导航栏 -->
            <div class="nav-bar">
                <div class="nav-item">
                    <i class="fas fa-home text-xl mb-1"></i>
                    <span>首页</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-notes-medical text-xl mb-1"></i>
                    <span>记录</span>
                </div>
                <div class="nav-item active">
                    <i class="fas fa-calendar-alt text-xl mb-1"></i>
                    <span>产检</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user-friends text-xl mb-1"></i>
                    <span>伴侣空间</span>
                </div>
                <div class="nav-item">
                    <i class="fas fa-user text-xl mb-1"></i>
                    <span>我的</span>
                </div>
            </div>
        </div>
    </body>
</html>
